<template>
  <div class="page">
    <titleVue :title="'自动评价时间配置'"></titleVue>
    <div class="main">
      <el-form :model="form" ref="form">
        <el-table :data="form.LevelList" class="levelTable" :header-cell-style="tableHeaderStyle"
          :row-class-name="rowStyle">
          <el-table-column align="center" prop="serialNumber" label="序号" width="50">
            <template slot-scope="scope">
              <div>{{ scope.$index + 1 }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="达成订单数量">
            <template slot-scope="scope">
              <div style="display: flex;justify-content: center;align-items: center;">
                <el-form-item :rules="LevelListRules.orderNumber" :prop="'LevelList.' + scope.$index + '.orderNumber'">
                  <el-input onkeyup="value=value.replace(/[^\d]/g,'')" class="tableInputStyle"
                    v-model="form.LevelList[scope.$index].orderNumber" size="small">
                    <template slot="suffix">
                      <div class="suffixText">单</div>
                    </template>
                  </el-input>
                </el-form-item>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="会员等级">
            <template slot-scope="scope">
              <el-form-item :rules="LevelListRules.menberLevel">
                <div class="text">
                  {{ scope.row.menberLevel || '1' }}
                  级</div>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <i class="iconfontcolor icon-a- commonStyle" v-show="scope.$index == 0" @click="addLevel()"></i>
              <i class="iconfontcolor icon-a-- commonStyle" v-show="scope.$index > 0"
                @click="delteLevel(scope.$index)"></i>
            </template>
          </el-table-column>



        </el-table>
      </el-form>
    </div>
    <div class="BtnBox">
      <button class="submitBtn" @click="saveEvent">保存</button>
    </div>
  </div>
</template>

<script>
import titleVue from '@/components/titleVue.vue'
import httpApi from '@/http';
export default {

  data() {
    let orderNumberRules = (rule, value, callback) => {

      let regular = /^\+[1-9][0-9]*$/
      console.log(value)
      if (value == '') {
        callback(new Error('达成订单数量不能为空'))
      }
      else if (regular.test(value)) {
        callback(new Error('达成订单数量格式错误'))
      } else {
        callback()
      }
    };
    return {
      form: {
        LevelList: [{ menberLevel: 1, orderNumber: "" }]
      },
      LevelListRules: {
        orderNumber: [{
          validator: orderNumberRules,
          trigger: 'blur',
        }],
      },


    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;'
    },
    rowStyle({ row, rowIndex }) {
      return 'tableRowStyleName'
    },
    getList() {
      let params = {
     
      }
      httpApi.basicSettingApi.membershipLevelsList(params).then((res) => {
          this.form.LevelList=res.data.data
      });
    },
    addLevel() {

      let defaulItem = { menberLevel: this.form.LevelList[this.form.LevelList.length - 1].menberLevel, orderNumber:'' }
      defaulItem.menberLevel = Number(defaulItem.menberLevel) + 1
      this.form.LevelList.push(JSON.parse(JSON.stringify(defaulItem)))

    },
    delteLevel(index) {
      this.form.LevelList.splice(index, 1);
      this.form.LevelList.forEach((item, index) => {
        item.menberLevel = Number(index) + 1
      })
    },
    isSort(arr) {
      let isSortRule = false
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i].orderNumber < arr[j].orderNumber) {
            // 不为从小到大
            isSortRule = false
            break
          } else {
            // 从小到大正确
            isSortRule = true
          }
        }
      }
      return isSortRule
    },
    saveEvent() {
      if (this.isSort(this.form.LevelList)) {
        this.$message.error('达成订单数量应从小到大')
        return
      }


      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.form)
          let params = {
            memberClassList:this.form.LevelList
          }
          httpApi.basicSettingApi.updateMembershipLevel(params).then((res) => {
            if(res.data.code==200){
                this.$message.success('修改成功')
                this.getList()
            }
          });
        } else {
          this.$message.error('请填写完整信息')
          return false;
        }
      });
    },
  },
  components: {
    titleVue
  }
}
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  height: calc(100vh - 191px);
  padding: 30px;
  position: relative;
}

.main {
  background-color: #fff;
  height: calc(100vh - 350px);
  overflow: scroll;
  ::v-deep .el-form-item{
    margin-bottom: 0px;
  }
  .levelTable {
    .qujianStyle {
      display: flex;
      align-items: center;
    }

    .tableInputStyle {
      .suffixText {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CCCCCC;
        text-align: center;
        line-height: 40px;

        padding-right: 10px;
      }
    }

    .commonStyle {
      font-size: 19px;
      cursor: pointer;
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}



.BtnBox {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;

  .submitBtn {
    cursor: pointer;
    height: 36px;
    border-radius: 4px;
    background-color: #1890FF;
    width: 80px;
    color: #fff;
    font-size: 12px;
    transition: 0.2s;

    &:hover {
      opacity: 0.8;
    }
  }
}
</style>
<style lang = "scss">
.tableRowStyleName {
  height: 80px;
  color: #262626 !important;
  font-size: 12px;
  padding: 20px 0 !important;

}
</style>